<style lang="less">
  @import 'own.less';
</style>

<template>
  <div>
    <Card>
      <p slot="title">
        <Icon type="md-person"></Icon>
        个人信息
      </p>
      <div>
        <Form ref="myForm" :rules="ruleValidate" :model="formItem" :label-width="80">
          <FormItem label="用户账号" prop="username">
            <div style="display:inline-block;width:300px">
              <Input v-model="username" disabled></Input>
            </div>
          </FormItem>
          <FormItem label="用户昵称" prop="nickname">
            <div style="display:inline-block;width:300px">
              <Input v-model="formItem.nickname"></Input>
            </div>
          </FormItem>
          <FormItem label="用户头像" prop="headImg">
            <SelectImg v-model="formItem.head_img"
                       :limit="1"
                       :initList="formItem.head_img"></SelectImg>
          </FormItem>
          <FormItem label="原密码" prop="oldPassword">
            <div style="display:inline-block;width:300px">
              <Input type="password" v-model="formItem.oldPassword"
                     placeholder="请输入现在使用的密码，如需修改密码则必填"></Input>
            </div>
          </FormItem>
          <FormItem label="新密码" prop="password">
            <div style="display:inline-block;width:300px">
              <Input type="password" v-model="formItem.password" placeholder="请输入新密码，至少6位字符"></Input>
            </div>
          </FormItem>
          <FormItem label="确认新密码" prop="rePassword">
            <div style="display:inline-block;width:300px">
              <Input type="password" v-model="rePassword" placeholder="请再次输入新密码"></Input>
            </div>
          </FormItem>
          <div>
            <Button type="text" style="width: 100px" @click="cancel">取消</Button>
            <Button type="primary" style="width: 100px" :loading="saveLoading" @click="confirmSubmit">保存
            </Button>
          </div>
        </Form>
      </div>
    </Card>
    <Modal v-model="confirmSub" width="360">
      <p slot="header" style="color:#f60;text-align:center">
        <Icon type="information-circled"></Icon>
        <span>确定要提交么</span>
      </p>
      <div style="text-align:center">
        <p>个人信息修改后，将会退出系统重新登录，请明确后修改！</p>
      </div>
      <div slot="footer">
        <Button type="error" size="large" long @click="submit">确定修改</Button>
      </div>
    </Modal>
  </div>
</template>

<script>
  import {mapActions} from 'vuex'
  import {own} from '@/api/user'
  import {baseUrl} from '@/libs/api.request'
  import {getToken} from '@/libs/util'
  import SelectImg from '../../../components/select-img';

  export default {
    name: 'own_index',
    components: {
      SelectImg
    },
    data() {
      const checkPassword = (rule, value, callback) => {
        let password = this.formItem.password
        if (password !== this.rePassword) {
          callback(new Error('两次输入密码不一致'))
        } else {
          callback()
        }
      }
      const checkOldPassword = (rule, value, callback) => {
        let password = this.formItem.password
        if (password) {
          if (!this.formItem.oldPassword) {
            callback(new Error('初始密码不得为空'))
          } else {
            callback()
          }
        } else {
          callback()
        }
      }
      return {
        confirmSub: false,
        saveLoading: false,
        rePassword: '',
        username: '',
        formItem: {
          nickname: '',
          head_img: null,
          oldPassword: '',
          password: ''
        },
        ruleValidate: {
          nickname: [
            {required: true, message: '请输入姓名', trigger: 'blur'}
          ],
          password: [
            {min: 6, message: '请至少输入6个字符', trigger: 'blur'},
            {max: 32, message: '最多输入32个字符', trigger: 'blur'}
          ],
          rePassword: [
            {validator: checkPassword, trigger: 'blur'}
          ],
          oldPassword: [
            {validator: checkOldPassword, trigger: 'blur'}
          ]
        }
      }
    },
    methods: {
      ...mapActions([
        'handleLogOut'
      ]),
      cancel() {
        this.$store.commit('removeTag', 'own_index')
        localStorage.pageOpenedList = JSON.stringify(this.$store.state.app.pageOpenedList)
        let lastPageName = ''
        if (this.$store.state.app.pageOpenedList.length > 1) {
          lastPageName = this.$store.state.app.pageOpenedList[1].name
        } else {
          lastPageName = this.$store.state.app.pageOpenedList[0].name
        }
        this.$router.push({
          name: lastPageName
        })
      },
      confirmSubmit() {
        this.confirmSub = true
      },
      submit() {
        let vm = this
        this.$refs['myForm'].validate((valid) => {
          if (valid) {
            vm.saveLoading = true
            let params = {
              nickname: vm.formItem.nickname,
              head_img: vm.formItem.head_img[0],
              oldPassword: vm.formItem.oldPassword,
              password: vm.formItem.password
            };
            own(params).then(response => {
              vm.$Message.success(response.data.msg)
              vm.handleLogOut().then(() => {
                vm.$router.push({
                  name: 'login'
                })
              })
              vm.saveLoading = false
            })
          }
        })
      },
      init() {
        let userInfo = this.$store.state.user.userInfo
        this.username = userInfo.username
        this.formItem.nickname = userInfo.nickname
        this.formItem.head_img = (userInfo.userData.head_img == null||userInfo.userData.head_img === '') ? null : [userInfo.userData.head_img];
      },
      handleImgFormatError(file) {
        this.$Notice.warning({
          title: '文件类型不合法',
          desc: file.name + '的文件类型不正确，请上传jpg或者png图片。'
        })
      },
      handleImgRemove() {
        this.formItem.head_img = ''
      },
      handleImgSuccess(response) {
        if (response.code === 1) {
          this.$Message.success(response.msg)
          this.formItem.head_img = response.data.fileUrl
        } else {
          this.$Message.error(response.msg)
        }
      },
      handleImgMaxSize(file) {
        this.$Notice.warning({
          title: '文件大小不合法',
          desc: file.name + '太大啦请上传小于5M的文件。'
        })
      }
    },
    mounted() {
      this.init()
    }
  }
</script>
